Migrating Legacy Web Applications to AngularJS

JavaScript applications can be like a lawn. Therefore over time, without discipline and attention, the weeds of technical debt can get out of control, thus creating unsupportable mess. In this talk, we share how you too can migrate a legacy, unmaintainable JavaScript application to a more stable, modern framework like AngularJS by using the best practices we’ve outlined. We have included both the video and the slides, as well as a few main takeaways below the video to help you along the way.

Video: Migrating Legacy Web Applications to AngularJS

If you want to see the entire presentation, click on the updated slides below.

What is a legacy application?

A legacy application could be an application that’s been cobbled together over the years. Perhaps with a bunch of features slapped onto it without much intentional thought as to what it might end up like. As a result, over time it just becomes a mess that might need to be scrapped.

Or it could be a really powerful application that’s been in development for years and years but it’s become convoluted and extremely hard to maintain. Another issue is that there are likely only a few people who even know how to keep it up and running.

Why is a legacy application like this a problem?

1. It ends up costing more to maintain
2. It’s likely slower to release to production
3. It produces low moral on the team

So what’s the answer? A new technology perhaps? Sadly, no. As we explain in the video, new tech by itself won’t give you costs savings, faster time to production, or a happy team. So what will give us these things? Cleaner Code!

But before we can talk about writing Cleaner code, we need to talk about the team that’s going to be writing it.

Since most software engineering teams have a wide range of technical proficiency and experience, their JavaScript experience likely varies as well. Some people writing the JavaScript may in fact not have a whole lot of experience in JavaScript. So in order to create a productive team you need to set some baselines.

How do you set a common baseline on your project? By using Coding Standards!

In order to get started with Coding Standards, you should check out the community guidelines. Here are a few of the popular ones for JavaScript:

1. Airbnb JavaScript style guide
2. Google’s Angular 1 style guide
3. Google’s Angular 2 style guide
4. John Papa

Once you and your team have worked out the Coding Standards that are right for you, be sure to hold each other accountable to the rules you’ve set.

In this video, we walk through how my team handled accountability once we set up our Coding Standards as well as how we used data binding, services, dependency injection, and components in our AngularJS app to write Cleaner Code.

So, if you’d like to learn more about best practices regarding JavaScript, you should check out the blog series below.

JavaScript Best Practices Series:

• Part 1: JavaScript Best Practices – An Introduction
• Part 2: JavaScript Best Practices – JavaScript Coding Standards
• Part 3: JavaScript Best Practices – JavaScript Frameworks and Libraries
• Part 4: JavaScript Best Practices – JavaScript Tools
• Part 5: JavaScript Best Practices – Angular UI Router Modals